<!-- 局部组件示例 -->
<!-- 局部组件需要在使用它的父组件中通过 import 导入后才能使用 -->
<script setup>
// 组件逻辑部分
// <script setup> 是 Vue 3 推荐的语法糖，内部定义的变量和方法可直接在模板中使用
// 局部组件的逻辑实现与全局组件无本质区别，核心差异在于使用范围的限制
</script>

<template>
    <!-- 组件的模板结构 -->
    <div class="local-container">
        <!-- 组件内部的标题内容 -->
        <h5 class="title">局部组件</h5>

    </div>
</template>

<style scoped>
/*
  组件的样式定义，scoped 属性表示样式仅作用于当前组件内的元素
  避免与其他组件的样式发生冲突，实现组件样式隔离
*/
.local-container {
    border: 1px solid black;  /* 为容器添加1px宽的黑色实线边框 */
    height: 50px;             /* 固定容器高度为50px */
    flex: 1;                  /* 设置flex属性，在父组件的flex布局中自动占满可用空间 */
    padding: 10px;            /* 可选：添加内边距让内容与边框有间距 */
}

/* 为组件内的标题设置样式（仅作用于当前组件的h5元素） */
h5 {
    margin: 0;                /* 去除浏览器默认的外边距 */
    line-height: 30px;        /* 让文字垂直居中（50px高度 - 20px上下内边距 = 30px内容区） */
}

</style>